<template>
    <div class="father">
        <h3>父组件</h3>
        <h4>a:{{ a }}</h4>
        <h4>b:{{ b }}</h4>
        <h4>c:{{ c }}</h4>
        <h4>d:{{ d }}</h4>
        <Child :a="a" :b="b" :c="c" :d="d" v-bind="{ x: 123, s: 510 }" :updateA="updateA"></Child>
    </div>
</template>

<script setup lang="ts" name="Father">
import Child from "./Child.vue";
import { ref } from "vue";

let a = ref(1)
let b = ref(2)
let c = ref(3)
let d = ref(4)

function updateA(value: number) {
    a.value += value
}


</script>

<style  scoped>
.father {
    background-color: reb(165, 164, 164);
    padding: 20px;
    border-radius: 10px;
}
</style>